<template>
	<view class="flex-col group_3 list-item">
		<view class="flex-row justify-between items-center" style="margin-bottom: 16rpx;">
			<view class="flex-row items-center space-x-17">
				<image
					class="shrink-0 image_4"
					mode="aspectFill"
					:src="info.avatar"
				/>
				<text class="font_2 text_3">{{info.mobile}}</text>
			</view>
			<view class="flex-row space-x-5">
				
				<image
					class="image_5"
					mode="aspectFill"
					:src="i<info.level ?'/static/evastar-ed.png' : '/static/evastar-un.png'"
					v-for="(item,i) in 5 " :key="i"
				/>
			</view>
		</view>
		<text class="font_3 content">{{info.remark}}</text>
		<view class="flex-row items-center group_4 view space-x-20">
			<text class="font_4">{{info.car_shortname}}</text>
			<text class="font_5">{{showDate(info.createtime)}}</text>
		</view>
		<block v-if="info.reply">
			<view class="flex-row items-center group_5 space-x-15" style="margin-bottom: 12rpx;">
				<image
					class="image_4"
					mode="aspectFill"
					:src="info.company_image"
				/>
				<text class="font_6">{{info.company_name}}</text>
			</view>
			<text class="self-start font_6 reply">{{info.reply}}</text>
			<text class="self-start font_5 text_6">{{showDate(info.replytime)}}</text>			
		</block>
		<view class="btn" v-else @click="tapReply(info.id)">
			回复
		</view>

	</view>
</template>
<script lang="ts">
import {
	defineComponent,
	watchEffect,
	reactive,
	toRefs,
	computed
	// watch,
	// nextTick,
	// ref,
} from 'vue';
// import { onReachBottom,onLoad } from "@dcloudio/uni-app";
const evaItem = defineComponent({
	props: {
		info: {
			type: Object,
			default: () => ({})
		}
	},
	setup(props: any, ctx: any) {
		const data: any = reactive({
			info: {}
		});
		watchEffect(() => {
			data.info = props.info;
		});
		const showDate = timestamp => {
			return uni.$tools.date('Y.m.d', timestamp);
		};
		const tapReply = (id)=>{
			ctx.emit("tapReply",id)
		}
		return {
			...toRefs(data),
			showDate,
			tapReply
		};
	}
});
export default evaItem;
</script>

<style lang="scss" scoped>
.content{
	padding: 0 63rpx;
}
.reply{
	padding: 0 63rpx 0 126rpx;
	line-height: 32rpx;
}
.group_3 {
	padding: 32rpx 18rpx 39rpx 32rpx;
	.space-x-17 {
		& > view:not(:first-child),
		& > text:not(:first-child),
		& > image:not(:first-child) {
			margin-left: 17rpx;
		}
		.font_2 {
			font-size: 26rpx;
			font-family: PingFang;
			color: #333333;
		}
	}
	.space-x-5 {
		& > view:not(:first-child),
		& > text:not(:first-child),
		& > image:not(:first-child) {
			margin-left: 5rpx;
		}
		.image_5 {
			width: 20rpx;
			height: 20rpx;
		}
		.image_6 {
			width: 68rpx;
			height: 20rpx;
		}
	}
	.font_3 {
		font-size: 26rpx;
		font-family: PingFang;
		color: #333333;
		line-height: 32rpx;
	}
	.group_4 {
		padding: 0 63rpx;
		.font_4 {
			font-size: 20rpx;
			font-family: PingFang;
			color: #999999;
		}
	}
	.view {
		margin-top: 12rpx;
	}
	.space-x-20 {
		& > view:not(:first-child),
		& > text:not(:first-child),
		& > image:not(:first-child) {
			margin-left: 20rpx;
		}
	}
	.group_5 {
		margin-top: 12rpx;
		padding: 0 62rpx;
	}
	.space-x-15 {
		& > view:not(:first-child),
		& > text:not(:first-child),
		& > image:not(:first-child) {
			margin-left: 15rpx;
		}
	}
	.image_4 {
		width: 48rpx;
		height: 48rpx;
		border-radius: 48rpx;
	}
	.font_6 {
		font-size: 26rpx;
		font-family: PingFang;
		color: #333333;
	}
	.text_5 {
		margin-left: 126rpx;
		margin-top: 11rpx;
	}
	.font_5 {
		font-size: 20rpx;
		font-family: PingFang;
		color: #999999;
	}
	.text_6 {
		margin-left: 126rpx;
		margin-top: 14rpx;
	}
}
.list-item {
	border-bottom: solid 2rpx #eee;
	position: relative;
	.btn{
		position: absolute;
		right: 0;
		bottom: 38rpx;
		width: 80rpx;
		text-align: center;
		height: 64rpx;
		line-height: 64rpx;
		
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #3E6FEF;
	}
}
</style>
